<template>
	<div class="bg_container">
		<div class="title_box">
			<span class="title_font">组织机构管理</span>
		</div>
		<div class="table_box">
			<div style="clear:both;border-bottom:1px solid #D3D3D3;"></div>

			<div class="table_min_box">
				<div class="detailBtn">
					<el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addOrg()">新增</el-button>
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="updateOrg()">修改</el-button>
					<el-button type="primary" size="mini" icon="el-icon-delete" @click="deleteOrg()">删除</el-button>
					<el-button type="primary" size="mini" icon="el-icon-setting" @click="checkOrg()">查看</el-button>
					<template v-for="button in buttonList">
						<el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="clickButton(button.link)">{{button.menuName}}</el-button>
					</template>
					<!--<el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="addSubOrg()">添加下级机构</el-button>-->
				</div>
				<tree-table :data="tableData" :clean="tableChecked" :columns="columns" @selectRow="selectRow" stripe border/>
			</div>
		</div>

		<loading :shall-we-talk="coverShow"></loading>

		<div class="dialog_box">
			<el-dialog :close-on-click-modal="false" :modal-append-to-body='false'  @close="closeDialog" style="font-size: .18rem;" center title="组织机构信息" :visible.sync="addDialogVisible" width="7rem">
				<el-form :model="orgForm" :rules="rules" ref="orgForm" label-width="1rem">
					<el-row type="flex" class="row-bg">
						<el-col :span="12">
							<el-form-item label="机构级别:" prop="org_organizaRank">
								<el-select style="width:2.4rem" :disabled="isDisabled" size="large" v-model="orgForm.org_organizaRank" placeholder="请选择机构级别">
									<el-option v-for="item in organizaLevel" :key="item.codeNo" :label="item.codeName" :value="item.codeNo"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="上级机构:" prop="org_organizaUp">
								<el-input :disabled="true" size="large" style="width:1.8rem" v-model="orgForm.org_organizaUpName" placeholder="请选择上级机构"></el-input>
								<el-popover v-model="isPopover" placement="bottom-end" width="250" trigger="manual">
									<el-tree :expand-on-click-node="false" class="tree" :data="departList" :props="departProps" ref="departTree" highlight-current @node-click="handleNodeClick">
									</el-tree>
									<el-button :disabled="isDisabled" slot="reference" size="large" @click="getDepartList">...</el-button>
								</el-popover>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" class="row-bg">
						<el-col :span="12">
							<el-form-item label="名称:" prop="org_name">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_name" placeholder="请输入名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="机构编号:" prop="org_number">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_number" placeholder="请输入编号"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" class="row-bg">
						<el-col :span="12">
							<el-form-item label="HR系统编号:" prop="org_hrSysNumber">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_hrSysNumber" placeholder="请输入HR系统编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="状态:" prop="org_status">
								<el-select style="width:2.4rem" :disabled="isDisabled" size="large" v-model="orgForm.org_status" placeholder="请选择状态">
									<el-option v-for="item in statuses" :key="item.codeNo" :label="item.codeName" :value="item.codeNo"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" class="row-bg">
						<el-col :span="12">
							<el-form-item label="主负责人:" prop="org_mainLeader">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_mainLeader" placeholder="请输入主负责人"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="副负责人:" prop="org_deputyLeader">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_deputyLeader" placeholder="请输入副负责人"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" class="row-bg">
						<el-col :span="12">
							<el-form-item label="电话:" prop="org_phone">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_phone" placeholder="请输入电话"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="邮箱:" prop="org_email">
								<el-input :disabled="isDisabled" size="large" v-model="orgForm.org_email" placeholder="请输入邮箱"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="备注:" prop="org_remark">
						<el-input :disabled="isDisabled" type="textarea" size="large" v-model="orgForm.org_remark" placeholder="请输入备注"></el-input>
					</el-form-item>
					<el-form-item style="margin-top:0.1rem;margin-left: 1.8rem;">
						<template v-if="isAdd || isEdit">
							<el-button @click="isAdd ? saveOrg('orgForm') : updateOrgInfo('orgForm')" size="small" type="primary">确定</el-button>
						</template>
						<el-button @click="callOf('orgForm')" size="small" type="primary">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import treeTable from "@/components/TreeTable";
	import Api from "@/Api/index";
	export default {
		name: "orgMgt",
		components: {
			treeTable
		},
		mounted() {
			this.initButtonList();
			this.initOrganizaLevel();
			this.initTable();
		},
		created() {},
		data() {
			return {
				columns: [{
						text: "",
						value: "",
						width: 50
					},
					{
						text: "机构名称",
						value: "name"
					},
					{
						text: "机构编号",
						value: "number"
					},
					{
						text: "机构级别",
						value: "organizaRankName"
					},
					{
						text: "HR系统编号",
						value: "hrSysNumber"
					},
					{
						text: "状态",
						value: "statusName"
					}
				],
				statuses: [{
						codeNo: "1",
						codeName: "有效"
					},
					{
						codeNo: "0",
						codeName: "无效"
					}
				],
				organizaLevel: [],
				tableChecked: {},
				coverShow: false,
				tableData: [],
				addDialogVisible: false,
				isAdd: false,
				isEdit: false,
				isDisabled: false,
				isOrganizaUp: false,
				orgForm: {
					org_id: "",
					org_organizaId: "",
					org_organizaRank: "",
					org_organizaUp: "",
					org_organizaUpName: "",
					org_name: "",
					org_status: "",
					org_number: "",
					org_hrSysNumber: "",
					org_mainLeader: "",
					org_deputyLeader: "",
					org_phone: "",
					org_email: "",
					org_remark: ""
				},
				rules: {
					org_name: [{
							required: true,
							message: "请输入名称",
							trigger: "blur"
						},
						{
							min: 1,
							max: 20,
							message: "长度在 1 到 20 个字符",
							trigger: "blur"
						}
					],
					org_organizaRank: [{
						required: true,
						message: "请选择机构级别",
						trigger: "blur"
					}],
					org_organizaUp: [{
						required: true,
						message: "请选择上级机构",
						trigger: "blur"
					}],
					org_status: [{
						required: true,
						message: "请选择状态",
						trigger: "blur"
					}],
					org_number: [{
							required: true,
							message: "请输入机构编号",
							trigger: "blur"
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '机构编号只能输入数字或字母',
							trigger: "blur"
						}
					],
					org_remark: {
						min: 1,
						max: 200,
						message: "长度在 1 到 200 个字符",
						trigger: "blur"
					},
					org_hrSysNumber: {
						pattern: /^[A-Za-z0-9]+$/,
						message: 'HR系统编号只能输入数字或字母',
						trigger: "blur"
					}
				},
				departList: [],
				departProps: {
					label: "name",
					value: "organizaId"
				},
				buttonList: [],
				isPopover: false
			};
		},
		methods: {
			//子组件触发数据改变
			selectRow(row) {
				console.log(row);
				this.tableChecked = row;
			},
			initButtonList() {
				let naviList = JSON.parse(sessionStorage.navilist);
				for(let button of naviList) {
					let link = button.link;
					if(link.indexOf('orgMgt') > -1) {
						this.buttonList = button.button;
					}
				}
			},
			//查询码值
			initOrganizaLevel() {
				let param = {};
				param.codeType = "organizaRank";
				Api.queryCodeLibrary(param)
					.then(res => {
						let result = res.data;
						if(result.resultCode == "1") {
							this.organizaLevel = result.data.codeList;
						} else {
							this.$message({
								type: "error",
								message: res.data.errorDesc
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			//查询参数
			initTable() {
				this.coverShow = true;
				this.tableChecked = {};
				let param = {};
				Api.queryOrganizaInfo(param)
					.then(res => {
						let result = res.data;
						if(result.resultCode == "1") {
							this.tableData = result.orgJson;
							this.totalNum = result.total;
							this.coverShow = false;
						} else {
							this.coverShow = false;
							this.$message({
								type: "error",
								message: res.data.errorDesc
							});
						}
					})
					.catch(err => {
						console.log(err);
						this.coverShow = false;
						this.$message({
							type: "error",
							message: "数据初始化失败!"
						});
					});
			},
			callOf(formName) {
				this.isPopover = false;
				this.addDialogVisible = false;
				this.orgForm = {
					org_id: "",
					org_organizaId: "",
					org_organizaRank: "",
					org_organizaUp: "",
					org_organizaUpName: "",
					org_name: "",
					org_status: "",
					org_number: "",
					org_hrSysNumber: "",
					org_mainLeader: "",
					org_deputyLeader: "",
					org_phone: "",
					org_email: "",
					org_remark: ""
				};
				this.$refs[formName].clearValidate();
				//this.initTable();
			},
			addOrg() {
				this.isPopover = false;
				this.addDialogVisible = true;
				this.orgForm = {
					org_id: "",
					org_organizaId: "",
					org_organizaRank: "",
					org_organizaUp: "",
					org_organizaUpName: "",
					org_name: "",
					org_status: "",
					org_number: "",
					org_hrSysNumber: "",
					org_mainLeader: "",
					org_deputyLeader: "",
					org_phone: "",
					org_email: "",
					org_remark: ""
				};
				this.isDisabled = false;
				this.isOrganizaUp = false;
				this.isEdit = false;
				this.isAdd = true;
				this.queryOrganizaInfo();
			},
			saveOrg(formName) {
				this.$refs[formName].validate(valid => {
					if(valid) {
						let param = {};
						param.organizaRank = this.orgForm.org_organizaRank;
						param.organizaUp = this.orgForm.org_organizaUp;
						param.organizaUpName = this.orgForm.org_organizaUpName;
						param.name = this.orgForm.org_name;
						param.status = this.orgForm.org_status;
						param.number = this.orgForm.org_number;
						param.hrSysNumber = this.orgForm.org_hrSysNumber;
						param.mainLeader = this.orgForm.org_mainLeader;
						param.deputyLeader = this.orgForm.org_deputyLeader;
						param.phone = this.orgForm.org_phone;
						param.email = this.orgForm.org_email;
						param.remark = this.orgForm.org_remark;
						Api.addOrganizaInfo(param)
							.then(res => {
								if(res.data.resultCode == "1") {
									this.addDialogVisible = false;
									this.initTable();
									this.$message({
										type: "success",
										message: "新增成功!"
									});
								} else {
									this.$message({
										type: "error",
										message: res.data.errorDesc
									});
								}
							})
							.catch(err => {
								console.log(err);
								this.$message({
									type: "error",
									message: "新增失败!"
								});
							});
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			updateOrg() {
				if(Object.keys(this.tableChecked).length !== 0) {
					this.isPopover = false;
					this.addDialogVisible = true;
					this.orgForm.org_id = this.tableChecked.id;
					this.orgForm.org_organizaId = this.tableChecked.organizaId;
					this.orgForm.org_organizaRank = this.tableChecked.organizaRank;
					this.orgForm.org_organizaUp = this.tableChecked.organizaUp;
					this.orgForm.org_organizaUpName = this.tableChecked.organizaUpName;
					this.orgForm.org_name = this.tableChecked.name;
					this.orgForm.org_status = this.tableChecked.status;
					this.orgForm.org_number = this.tableChecked.number;
					this.orgForm.org_hrSysNumber = this.tableChecked.hrSysNumber;
					this.orgForm.org_mainLeader = this.tableChecked.mainLeader;
					this.orgForm.org_deputyLeader = this.tableChecked.deputyLeader;
					this.orgForm.org_phone = this.tableChecked.phone;
					this.orgForm.org_email = this.tableChecked.email;
					this.orgForm.org_remark = this.tableChecked.remark;
					this.isDisabled = false;
					this.isOrganizaUp = true;
					this.isEdit = true;
					this.isAdd = false;
					this.queryOrganizaInfo();
				} else {
					this.$message({
						type: "error",
						message: "请选择一条角色数据!"
					});
				}
			},
			updateOrgInfo(formName) {
				this.$refs[formName].validate(valid => {
					if(valid) {
						let param = {};
						param.id = this.orgForm.org_id;
						param.organizaId = this.orgForm.org_organizaId;
						param.organizaRank = this.orgForm.org_organizaRank;
						param.organizaUp = this.orgForm.org_organizaUp;
						param.organizaUpName = this.orgForm.org_organizaUpName;
						param.name = this.orgForm.org_name;
						param.status = this.orgForm.org_status;
						param.number = this.orgForm.org_number;
						param.hrSysNumber = this.orgForm.org_hrSysNumber;
						param.mainLeader = this.orgForm.org_mainLeader;
						param.deputyLeader = this.orgForm.org_deputyLeader;
						param.phone = this.orgForm.org_phone;
						param.email = this.orgForm.org_email;
						param.remark = this.orgForm.org_remark;
						Api.updateOrganizaInfo(param)
							.then(res => {
								if(res.data.resultCode == "1") {
									this.addDialogVisible = false;
									this.initTable();
									this.$message({
										type: "success",
										message: "修改成功!"
									});
								} else {
									this.$message({
										type: "error",
										message: res.data.errorDesc
									});
								}
							})
							.catch(err => {
								console.log(err);
								this.$message({
									type: "error",
									message: "修改失败!"
								});
							});
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			deleteOrg() {
				if(Object.keys(this.tableChecked).length !== 0) {
					this.$confirm("确定要删除此数据吗？", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							let param = {};
							param.organizaId = this.tableChecked.organizaId;
							Api.deleteOrganizaInfo(param)
								.then(res => {
									let result = res.data;
									if(result.resultCode == "1") {
										this.initTable();
										this.$message({
											type: "success",
											message: "删除成功!"
										});
									} else {
										this.$message({
											type: "error",
											message: "删除失败!"
										});
									}
								})
								.catch(err => {
									console.log(err);
									this.coverShow = false;
									this.$message({
										type: "error",
										message: "删除失败!"
									});
								});
						})
						.catch(() => {
							this.$message({
								type: "info",
								message: "已取消"
							});
						});
				} else {
					this.$message({
						type: "error",
						message: "请选择一条角色数据!"
					});
				}
			},
			checkOrg() {
				if(Object.keys(this.tableChecked).length !== 0) {
					this.addDialogVisible = true;
					this.orgForm.org_id = this.tableChecked.id;
					this.orgForm.org_organizaId = this.tableChecked.organizaId;
					this.orgForm.org_organizaRank = this.tableChecked.organizaRank;
					this.orgForm.org_organizaUp = this.tableChecked.organizaUp;
					this.orgForm.org_organizaUpName = this.tableChecked.organizaUpName;
					this.orgForm.org_name = this.tableChecked.name;
					this.orgForm.org_status = this.tableChecked.status;
					this.orgForm.org_number = this.tableChecked.number;
					this.orgForm.org_hrSysNumber = this.tableChecked.hrSysNumber;
					this.orgForm.org_mainLeader = this.tableChecked.mainLeader;
					this.orgForm.org_deputyLeader = this.tableChecked.deputyLeader;
					this.orgForm.org_phone = this.tableChecked.phone;
					this.orgForm.org_email = this.tableChecked.email;
					this.orgForm.org_remark = this.tableChecked.remark;
					this.isEdit = false;
					this.isAdd = false;
					this.isDisabled = true;
					this.isOrganizaUp = true;
					this.queryOrganizaInfo();
				} else {
					this.$message({
						type: "error",
						message: "请选择一条角色数据!"
					});
				}
			},
			addSubOrg() {
				if(Object.keys(this.tableChecked).length !== 0) {
					this.addDialogVisible = true;
					this.orgForm = {
						org_id: "",
						org_organizaId: "",
						org_organizaRank: "",
						org_organizaUp: "",
						org_organizaUpName: "",
						org_name: "",
						org_status: "",
						org_number: "",
						org_hrSysNumber: "",
						org_mainLeader: "",
						org_deputyLeader: "",
						org_phone: "",
						org_email: "",
						org_remark: ""
					};
					this.orgForm.org_organizaUp = this.tableChecked.organizaId;
					this.orgForm.org_organizaUpName = this.tableChecked.name;
					this.isDisabled = false;
					this.isOrganizaUp = true;
					this.isEdit = false;
					this.isAdd = true;
					this.queryOrganizaInfo();
				} else {
					this.$message({
						type: "error",
						message: "请选择一条角色数据!"
					});
				}
			},
			queryOrganizaInfo() {
				let param = {};
				Api.queryOrganizaInfo(param)
					.then(res => {
						let result = res.data;
						if(result.resultCode == "1") {
							this.departList = result.orgJson;
						} else {
							this.$message({
								type: "error",
								message: res.data.errorDesc
							});
						}
					})
					.catch(err => {
						console.log(err);
						this.$message({
							type: "error",
							message: "查询部门信息失败!"
						});
					});
			},
			handleNodeClick(data) {
				this.orgForm.org_organizaUp = data.organizaId;
				this.orgForm.org_organizaUpName = data.name;
				this.isPopover = false;
			},
			clickButton(obj){
				if(obj) {
					eval('this.'+ obj +'()');
				}
			},
			closeDialog() {
				this.isPopover = false;
			},
			getDepartList() {
				this.isPopover = true;
			},
			getTemplateRow(index, row) {
				//获取选中数据
				this.tableChecked = JSON.parse(JSON.stringify(row));
			}
		}
	};
</script>
<style lang="scss" scoped>
	.btnLine {
		margin-top: 0.05rem;
	}
	
	.tree {
		overflow-y: auto;
		height: 2.5rem;
	}
	
	.el-input__inner {
		height: .28rem !important;
	}
	
	.row-bg {
		margin-bottom: .16rem !important;
	}
	
</style>